<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="format-detection" content="telephone=no">
<title>LayIM 移动版</title>

<link rel="stylesheet" th:href="@{/layui/css/layui.mobile.css}">

</head>
<body>

<script th:inline="javascript">var ctx = [[@{/}]];</script>
<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/js/axios.js}"></script>
<script th:src="@{/js/axios_instance.js}"></script>
<script th:src="@{/js/wsconfig.js}"></script>
<script>
layui.config({
  version: true
}).use('mobile', function(){
  var mobile = layui.mobile
  ,layim = mobile.layim
  ,layer = mobile.layer;
  
  //提示层
  layer.msg = function(content){
    return layer.open({
      content: content
      ,skin: 'msg'
      ,time: 2 //2秒后自动关闭
    });
  };
  
  //演示自动回复
  var autoReplay = [
    '您好，我现在有事不在，一会再和您联系。', 
    '你没发错吧？face[微笑] ',
    '洗澡中，请勿打扰，偷窥请购票，个体四十，团体八折，订票电话：一般人我不告诉他！face[哈哈] ',
    '你好，我是主人的美女秘书，有什么事就跟我说吧，等他回来我会转告他的。face[心] face[心] face[心] ',
    'face[威武] face[威武] face[威武] face[威武] ',
    '<（@￣︶￣@）>',
    '你要和我说话？你真的要和我说话？你确定自己想说吗？你一定非说不可吗？那你说吧，这是自动回复。',
    'face[黑线]  你慢慢说，别急……',
    '(*^__^*) face[嘻嘻] ，是贤心吗？'
  ];
    request({
        method: 'get',
        url: '/layim/getList'
    }).then(res => {
        if (res.code != 0){
            return layer.msg(res.msg)
        }
        layim.config({
            init: {
                //设置我的基础信息
                mine: res.data.mine
                //好友列表数据
                ,friend: res.data.friend
            },
            //上传图片接口
            uploadImage: {
                url: '/upload/image' //（返回的数据格式见下文）
                ,type: '' //默认post
            }

            //上传文件接口
            ,uploadFile: {
                url: '/upload/file' //（返回的数据格式见下文）
                ,type: '' //默认post
            }

            //,brief: true

            // //扩展聊天面板工具栏
            // ,tool: [{
            //     alias: 'code'
            //     ,title: '代码'
            //     ,iconUnicode: '&#xe64e;'
            // }]

            //扩展更多列表
            ,moreList: [{
                alias: 'find'
                ,title: '发现'
                ,iconUnicode: '&#xe628;' //图标字体的unicode，可不填
                ,iconClass: '' //图标字体的class类名
            },{
                alias: 'share'
                ,title: '分享与邀请'
                ,iconUnicode: '&#xe641;' //图标字体的unicode，可不填
                ,iconClass: '' //图标字体的class类名
            }]

            //,tabIndex: 1 //用户设定初始打开的Tab项下标
            //,isNewFriend: false //是否开启“新的朋友”
            ,isgroup: true //是否开启“群聊”
            //,chatTitleColor: '#c00' //顶部Bar颜色
            //,title: 'LayIM' //应用名，默认：我的IM
            ,copyright: true
        });
    });
  
  //监听点击“新的朋友”
  layim.on('newFriend', function(){
    layim.panel({
      title: '新的朋友' //标题
      ,tpl: '<div style="padding: 10px;">自定义模版，{{d.data.test}}</div>' //模版
      ,data: { //数据
        test: '么么哒'
      }
    });
  });
  
  //查看聊天信息
  layim.on('detail', function(data){
    //console.log(data); //获取当前会话对象
    layim.panel({
      title: data.name + ' 聊天信息' //标题
      ,tpl: '<div style="padding: 10px;">自定义模版，<a href="http://www.layui.com/doc/modules/layim_mobile.html#ondetail" target="_blank">参考文档</a></div>' //模版
      ,data: { //数据
        test: '么么哒'
      }
    });
  });
  
  //监听点击更多列表
  layim.on('moreList', function(obj){
    switch(obj.alias){
      case 'find':
        layer.msg('自定义发现动作');
        
        //模拟标记“发现新动态”为已读
        layim.showNew('More', false);
        layim.showNew('find', false);
      break;
      case 'share':
        layim.panel({
          title: '邀请好友' //标题
          ,tpl: '<div style="padding: 10px;">自定义模版，{{d.data.test}}</div>' //模版
          ,data: { //数据
            test: '么么哒'
          }
        });
      break;
    }
  });

    // 监听聊天窗口的切换
layim.on('chatChange', function(data){
    console.log(data);
});

//监听查看群员
    layim.on('members', function (data) {
        console.log(data);
    });

  //监听返回
  layim.on('back', function(){
    //如果你只是弹出一个会话界面（不显示主面板），那么可通过监听返回，跳转到上一页面，如：history.back();
    //   history.back();
  });
  
  //监听自定义工具栏点击，以添加代码为例
  layim.on('tool(code)', function(insert, send){
    // insert('[pre class=layui-code]123[/pre]'); //将内容插入到编辑器
    // send();
  });
  
  //监听发送消息
  layim.on('sendMessage', function(data){
    var To = data.to;
    //console.log(data);
      var Mine = data.mine;
      // console.log(data);

      // send message to websocket
      if (To.type === 'friend'){
          WS.sendMessage(MSG_CMD.CHAT,data)
      } else if(To.type === 'group') {
          WS.sendMessage(MSG_CMD.GROUP_MSG,data)
      }

  });
  
  //监听查看更多记录
  layim.on('chatlog', function(data, ul){
    console.log(data);
    layim.panel({
      title: '与 '+ data.name +' 的聊天记录' //标题
      ,tpl: '<div style="padding: 10px;">这里是模版，{{d.data.test}}</div>' //模版
      ,data: { //数据
        test: 'Hello'
      }
    });
  });
  
  //模拟"更多"有新动态
  layim.showNew('More', true);
  layim.showNew('find', true);

    //监听layim建立就绪
    layim.on('ready', function (res) {

        // console.log('layim read---------');
        // console.log(res);

        /**
         * 收到消息后
         */
        WS.wscall.onmessage = function (event) {
            console.log('onmessage...');
            var resp = JSON.parse(event.data)
            // console.log(resp);
            // case 1: 用户消息

            // case 2: 系统消息

            switch (resp.cmd){
                case MSG_CMD.CHAT:
                case MSG_CMD.GROUP_MSG:
                    if (!resp.mine){
                        layim.getMessage(resp);
                    }
                    break;
                case MSG_CMD.ONLINE_STATUS:
                    layim.setFriendStatus(resp.friendId, resp.onlineStatus);
                    break;
            }
        }

        /**
         * 连接后
         */
        WS.wscall.onopen = function (event) {
            console.log('onopen...');
            var cache =  layim.cache();
            var mine = cache.mine;
            WS.sendMessage(MSG_CMD.CONNECT,mine)
        }

        /**
         * 连接关闭
         */
        WS.wscall.onclose = function (event) {
            console.log('onclose...');
            layer.msg("连接关闭")
        }

        /**
         * 连接异常
         */
        WS.wscall.onerror = function () {
            console.log('onerror...');
            layer.msg("连接异常")
        }

        // 设置完 WS.wscall 后再 init
        WS.init()
        // 心跳检测
        let cache =  layim.cache();
        let mine = cache.mine;
        WS.keepAlive(mine)

    });


});
</script>
</body>
</html>
